import { HomeOutlined } from '@ant-design/icons'
import { Button, Breadcrumb, Row, Col, Affix } from 'antd'
import { title } from 'process'
import React, { ReactNode } from 'react'
import { useAppDispatch } from '../app/hooks'
import { logOut } from '../features/user/slice'
import bgImg from '../static/workspaceBg.svg'
import style from './CommonBackground.module.css'
import { LoginOutlined } from '@ant-design/icons'

interface CommonBackgroundProps {
  title: string
  children?: ReactNode
}

const CommonBackground = (props: CommonBackgroundProps) => {
  const dispatch = useAppDispatch()
  const handleLoginOut = () => {
    dispatch(logOut())
  }

  return (
    <div className={style.container}>
      <div className={style.bg}>
        <embed src={bgImg} type="image/svg+xml" />
      </div>
      
        <div className={style.header}>
        <Row>
          <Col span={9} offset={1}>
            <Breadcrumb>
              <Breadcrumb.Item href="/">
                <HomeOutlined />
              </Breadcrumb.Item>
              <Breadcrumb.Item>{props.title}</Breadcrumb.Item>
            </Breadcrumb>
          </Col>
          <Col span={1} offset={12}>
            <Button
              shape="circle"
              type="primary"
              size="large"
              icon={<LoginOutlined />}
              onClick={handleLoginOut}
            />
          </Col>
        </Row>
        </div>
      
      {props.children}
    </div>
    // <div className={style.container}>
    //    <h1>{props.title}</h1>
    //    <Button
    //     shape="circle"
    //     type="primary"
    //     size="large"
    //     icon={<LoginOutlined />}
    //     onClick={handleLoginOut}
    //   />
    //   {/* <Carousel >
    //       <div>
    //         <h3><img src="Img1" alt='pic1' /></h3>
    //       </div>
    //       <div>
    //       <h3><img src="Img2" alt='pic1' /></h3>
    //       </div>
    //       <div>
    //       <h3><img src="Img3" alt='pic1' /></h3>
    //       </div>
             
          
    //     </Carousel> */}
    //     {props.children}


    //   {/* <div className={style.bg}>
    //     <embed src={bgImg} type="image/svg+xml" />
    //   </div> */}

    // </div>
  )
}

CommonBackground.defaultProps = {
  title: 'Workspace',
}

export default CommonBackground
